QT qml定制炫酷界面

2023-08-31 23:43| 来源: 网络整理| 查看: 265

一，前言

上次QT GraphicsItem GUI界面定制--Apple的学习笔记中我已经研究了下graphicsview，能进行简单的自定义对象界面。但是卡住我的就是那个layout界面是window style的，怎么修改风格呢？于是我开始研究关键炫酷界面定制，了解到了以前QT会用CSS，后来有了paint重绘，比如基于graphicsview的界面，然后现在主推的是逻辑与界面分离的设计，也就是主推qml编程。

二，grapicsItem组合炫酷界面

这3者这几天我都简单玩了下。先用我熟悉的graphicview制作了类似ue4的蓝图界面元素。现在卡住我的依然是捆绑方案。方案1：我用了graphicsItem里面添加了qwidget的txt元素。方案2：和方案1类似的思路是用graphicsTextItem绑定到自定义的item中。方案3：用QGraphicsItemGroup来绑定2个对象，让QGraphicsItemGroup升级为我的自定义对象。但是这些方案中都有一个问题就是click txt后无法编辑。这个查看了下是关于鼠标事件透传，网上说要设置属性，然后设置为透传，关于每个回调函数调用的顺序我还搞的不是很清楚。但是个人觉得第3种方案会比较好。我先用graphicsView来绘制了炫酷界面其实界面的设计参考了python的Ryven及ue4蓝图界面风格。我自定义一个graphicsItem类如下

image.png

关于这个界面的源码，需要的同学可以联系我。

三，基于qml的炫酷界面

简单学了下qml语法及查看qml help的方法后，入门qml真的很快。而且发现它比graphicsItem用起来简单多了，qml其实主推的是和js配套使用，一个做前台界面美化，一个做后台功能逻辑。 qml我可以做一个自定义的对象，然后qml里面也解决了多重对象鼠标事件透传，需要设置propagateComposedEvents: true，但是关于组合体的布局我没有用锚，而是固定的直接坐标，这个不太好。 qml已经实现了炫酷界面定期，内嵌的txt文本编辑库可以在鼠标左键/右击/左键+shift键的时候更改文本内容。然后也可以拖动。算是完成了简单的HMI定制功能。

qml炫酷界面.gif

四，qml源码 image.png main.cpp #include #include int main(int argc, char *argv[]) { #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0) QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); #endif QGuiApplication app(argc, argv); QQmlApplicationEngine engine; engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); #if 0 const QUrl url(QStringLiteral("qrc:/main.qml")); QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, &app, [url](QObject *obj, const QUrl &objUrl) { if (!obj && url == objUrl) QCoreApplication::exit(-1); }, Qt::QueuedConnection); engine.load(url); #endif return app.exec(); }

main.qml

import QtQuick 2.15 import QtQuick.Window 2.15 Window { id:mainRoot width: 300 height: 200 visible: true title: qsTr("Apple Leaning") Customitem{ //anchors.fill: parent } }

Customitem.qml

import QtQuick 2.0 Item { // 背景 Rectangle { id: myobj x: 0; y: 0 width: 120; height: 160 color: "black" radius: 5 border.color: "red" border.width: 2 // 标题 Rectangle { id: objtytle x: 0; y: 0 radius: 5 width: 120; height: 32 border.width:1 border.color:"red" smooth:true gradient: Gradient{ GradientStop{position: 0.0; color: "black"} GradientStop{position: 1.0; color: "red"} } //rotation: 90 transformOrigin: "Center" Text{ text: "Apple's Demo" color:"#e26161" anchors.centerIn: parent } } //第一个输入口 Rectangle { x: 10;y:40 width: 16 //width height: 16 //=width //color: Qt.rgba(200/255,0/255,0/255, 0.5) color: "black" radius: 8 //width/2 border.color: "red" Canvas { id: canvasId1 x:17;y:2 property color triangleColor: "#474747" width: 8; height: 12 contextType: "2d" onPaint: { context.lineWidth = 0 context.strokeStyle = "#00000000" context.fillStyle = triangleColor context.beginPath(); context.moveTo(0, 0) context.lineTo(0, canvasId1.height); context.lineTo(canvasId1.width, canvasId1.height/2); context.closePath(); context.fill() context.stroke(); } } } //第二个输入口 Rectangle { x: 10;y:70 width: 16 //width height: 16 //=width //color: Qt.rgba(200/255,0/255,0/255, 0.5) color: "black" radius: 8 //width/2 border.color: "red" Canvas { id: canvasId2 x:17;y:2 property color triangleColor: "#474747" width:8; height: 12 contextType: "2d" onPaint: { context.lineWidth = 0 context.strokeStyle = "#00000000" context.fillStyle = triangleColor context.beginPath(); context.moveTo(0, 0) context.lineTo(0, canvasId2.height); context.lineTo(canvasId2.width, canvasId2.height/2); context.closePath(); context.fill() context.stroke(); } } } //第一个输出口 Rectangle { x: 86;y:40 width: 16 //width height: 16 //=width //color: Qt.rgba(200/255,0/255,0/255, 0.5) color: "black" radius: 8 //width/2 border.color: "red" Canvas { id: canvasId3 x:17;y:2 property color triangleColor: "#474747" width:8; height: 12 contextType: "2d" onPaint: { context.lineWidth = 0 context.strokeStyle = "#00000000" context.fillStyle = triangleColor context.beginPath(); context.moveTo(0, 0) context.lineTo(0, canvasId3.height); context.lineTo(canvasId3.width, canvasId3.height/2); context.closePath(); context.fill() context.stroke(); } } }//第一个输出口 //txt操作框 Rectangle { id:optxt x:40;y:60 width: 40 height: 15 color: "black" border.color: "grey" anchors.horizontalCenter: myobj.Center TextInput { text:"+" id: opInput color:"red" anchors.fill: parent anchors.margins: 2 font.pointSize: 8 //focus: true anchors.horizontalCenter: optxt.Center } MouseArea { anchors.fill: parent acceptedButtons: Qt.LeftButton | Qt.RightButton onClicked: { //右键 if(mouse.button === Qt.RightButton) { //optxt.color = "blue" opInput.text = "-" } //左键 + shift键 else if((mouse.button === Qt.LeftButton) && (mouse.modifiers & Qt.ShiftModifier)) { //optxt.color = "green" opInput.text = "*" } else { //optxt.color = "yello" opInput.text = "/" } } } } MouseArea { propagateComposedEvents: true //组合事件，可以传递到下一层的鼠标事件 anchors.fill: parent //! [drag] drag.target: myobj drag.axis: Drag.XAndYAxis //drag.minimumX: 0 //drag.maximumX: parent.width //drag.minimumY: 0 //drag.maximumY: parent.height //! [drag] onClicked: { console.log("item clicked") //组合事件可以不写处理程序，或者accepted为false mouse.accepted = false } } }//背景框 } 五，总结

从一开没有方向，到后来有了很多方向，但是暂时还是有实现完整的功能，只实现了炫酷界面部分功能，这也是一种探索学习后的进步，算是一个关键的里程碑，所以特此记录。而我本轮的主要目的不是想到什么好玩的工具，然后进行实现，其实主要目的就是学习定义HMI炫酷界面，因为我之前自己给自己做的工具感觉界面美观方面都太简单了。此次主要是掌握了方法，为将来自己做好玩的工具进行准备，现在已经达成目标了，可以close file了。

【本文地址】

QT qml定制炫酷界面

QT qml定制炫酷界面

今日新闻

推荐新闻